<template>
  <div class='photoinfo-container'>
    <h3 class='title'>{{ info.title }}</h3>
    <div class='subtitle'>
      <span>发表时间：{{ info.add_time | dataFormat }}</span>
      <span>点击：{{ info.click }}次</span>
    </div>
    <hr>
    <!-- 缩略图 -->
    <vue-preview :slides="list" @close="handleClose"></vue-preview>
    <!-- 图片内容区域 -->
    <div class='content' v-html='info.content'></div>

    <!-- 评论区 -->
    <cmt-box :id="this.id"></cmt-box>
  </div>
</template>

<script>
import comment from '../subcomponents/comment.vue'
export default {
  data(){
    return {
      info:[],
      id: this.$route.params.id,
      list:[]
    }
  },
  created(){
    this.getPhotoInfo()
    this.getThums()
  },
  methods:{
    getPhotoInfo(){
      this.$http.get('getimageInfo/' + this.id).then(result => {
        if(result.body.status === 0){
          this.info = result.body.message[0]
        }
      })
    },
    getThums(){
      this.$http.get('getthumimages/'+this.id).then(result => {
        console.log(result.body.message);
        if(result.body.status === 0){
          result.body.message.forEach(item =>{
            item.w = 600;
            item.h = 400;
          })
          this.list = result.body.message
          console.log(result.body.message);
          
        }
      })
    },
    handleClose () {
        console.log('close event')
    }
  },
  components:{
    'cmt-box': comment
  }
}
</script>

<style lang="scss" scoped>
.photoinfo-container{
  padding:3px;
  .title{
    font-size: 15px;
    color: #26a2ff;
    text-align:center;
    margin:15px;
  }
  .subtitle{
    font-size: 14px;
    display:flex;
    justify-content: space-between;
  }
  .content{
    font-size:14px;
    color:#8f8f94;
  }
}

</style>
